Nemesis
Minimal Blog HTML Template
Welcome
Created on February 2020by fbtemplates
Thank you for purchasing our theme Nemesis - Minimal Blog HTML Template. If you have any question, please feel free to contact us.
Main File Structure
All the file are well organized, its so easy to work with the template.1. Unzip the files.
2. Open "nemesis" folder.
You will see 4 directories, css, fonts, images, js.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library.
Fonts folder contain essetial font files for fonts.
HTML Structure
The base structure was organized by container, row, col-** class
<div class="outer-wrapper clearfix" id="outer-wrapper">
<div class="container fbt-elastic-container">
<div class="row justify-content-center">
<!-- Main Wrapper -->
<div class="fbt-main-wrapper col-xl-12">
<div id="main-wrapper">
<div class="main-section" id="main_content">
<div class="blog-posts fbt-index-post-wrap card-columns">
<div class="blog-post fbt-index-post card radius-10">
<div class="fbt-post-thumbnail">
<a href="./single.html">
<img alt="" class="post-thumbnail lazyloaded" data-src="./images/img-2.jpg"
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
</a>
</div>
<div class="fbt-post-caption card-body">
<h3 class="post-title h4 card-title">
<a href="./single.html">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>
</h3>
<div class="post-meta">
<span class="post-author"><a href="#">fbtemplates</a></span>
<span class="post-date published">June 19, 2019</span>
</div>
<p class="post-excerpt card-text">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec facilisis leo et bibendum
pretium. Suspendisse li…
</p>
</div>
</div>
<div class="blog-post hentry fbt-index-post card radius-10">
<div class="fbt-post-thumbnail">
<a href="./single.html">
<img alt="" class="post-thumbnail lazyloaded" data-src="./images/img-3.jpg"
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
</a>
</div>
<div class="fbt-post-caption card-body">
<h3 class="post-title h4 card-title">
<a href="./single.html">
Nunc tellus libero, tempus id luctus eget, fermentum.
</a>
</h3>
<div class="post-meta">
<span class="post-author"><a href="#">fbtemplates</a></span>
<span class="post-date published">June 05, 2019</span>
</div>
<p class="post-excerpt card-text">
Donec dolor elit, pellentesque a massa
pellentesque, euismod sagittis ipsum. Nullam a diam ac turpis
iaculis vu…
</p>
</div>
</div>
<div class="blog-post hentry fbt-index-post card radius-10">
<div class="fbt-post-thumbnail">
<a href="./video_post.html">
<img alt="" class="post-thumbnail lazyloaded" data-src="./images/img-4.jpg"
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
</a>
<span class="video-icon"><i class="fa fa-play"></i></span>
</div>
<div class="fbt-post-caption card-body">
<h3 class="post-title h4 card-title">
<a href="./video_post.html">
The
future of news blogger themes. Custom post carousel.
</a>
</h3>
<div class="post-meta">
<span class="post-author"><a href="#">fbtemplates</a></span>
<span class="post-date published">September 13, 2018</span>
</div>
<p class="post-excerpt card-text">
Fames dictumst massa massa, qui sapien
per, mauris id sed cubilia suspendisse neque. Proin natoque
consectetuer…
</p>
</div>
</div>
............................
</div>
<div class="blog-pager" id="blog-pager">
<div class="list-inline">
<a class="blog-pager-older-link list-inline-item" href="#" title="More posts">
<div class="fbt-bp-message text-uppercase font-weight-bold">More posts</div>
<span aria-hidden="true" class="fa fa-angle-down"></span>
</a>
</div>
</div><!-- #blog-pager -->
</div>
</div><!-- #main-wrapper -->
</div><!-- .fbt-main-wrapper -->
..............................
</div>
</div>
</div>
CSS Structure
The base CSS structure
/* Posts
===================================== */
.tooltip {
font-family: "Nunito", sans-serif;
font-size: 14px;
font-weight: 400;
}
.feed-view .card-text {
font-family: "Nunito", sans-serif;
font-size: 14px;
font-weight: 400;
}
.feed-view .blog-post {
font-family: "Nunito", sans-serif;
font-size: 14px;
font-weight: 400;
}
.item-view .card-text {
font-family: "Nunito", sans-serif;
font-size: 14px;
font-weight: 400;
}
.item-view .post-body {
font-family: "Nunito", sans-serif !important;
font-size: 17px;
font-weight: 400;
line-height: 34px !important;
letter-spacing: .3px !important;
color: #222222;
}
.item-view .fbt-post-thumbnail {
width: 100%;
height: auto;
}
.post-meta {
font-family: "Nunito", sans-serif;
font-size: calc(14px - 2px);
font-weight: 400;
}
.post-meta span:not(:last-child):after {
content: '/';
margin: 0 3px 0 7px;
}
.post-meta a {
color: #222222;
text-transform: uppercase;
}
.post-meta a:hover {
color: #47c3fb;
}
.post-meta .post-author {
color: #222222;
text-transform: uppercase;
}
.post-title {
margin-bottom: 12px;
}
.post-excerpt {
margin-top: 10px;
}
.fbt-post-thumbnail {
width: 100%;
height: 242px;
overflow: hidden;
position: relative;
}
.blog-post:nth-child(2) .fbt-post-thumbnail {
height: 250px;
}
.blog-post:nth-child(4) .fbt-post-thumbnail {
height: 250px;
}
.blog-post:nth-child(6) .fbt-post-thumbnail {
height: 434px;
}
.blog-post:nth-child(8) .fbt-post-thumbnail {
height: 250px;
}
.blog-post:nth-child(10) .fbt-post-thumbnail {
height: 250px;
}
.blog-post:nth-child(12) .fbt-post-thumbnail {
height: 250px;
}
.blog-post:nth-child(14) .fbt-post-thumbnail {
height: 250px;
}
.blog-post:nth-child(2n+2) .video-icon {
display: none;
}
.blog-post:nth-child(2n+2) .card-body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
background-color: rgba(0, 0, 0, 0.1);
background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 110%);
pointer-events: none;
}
.blog-post:nth-child(2n+2):hover h3 {
text-decoration: underline;
}
.blog-post:nth-child(2n+2):hover h3 a {
text-decoration: underline;
}
.blog-post:nth-child(2n+2) h3 {
color: #fff !important;
}
.blog-post:nth-child(2n+2) h3 a {
color: #fff !important;
}
.blog-post:nth-child(2n+2) .post-meta {
color: #fff !important;
}
.blog-post:nth-child(2n+2) .post-meta a {
color: #fff !important;
}
.blog-post:nth-child(2n+2) .post-meta .post-author {
color: #fff !important;
}
.blog-post:nth-child(2n+2) .card-text {
color: #fff !important;
}
.fbt-item-post .post-body img {
max-width: 100%;
}
.post-thumbnail {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.fbt-index-post.card {
background-color: #4a42ec;
}
.fbt-index-post.card:nth-child(3) {
background-color: #ff4274;
}
.fbt-index-post.card:nth-child(5) {
background-color: #0099cc;
}
.fbt-index-post.card:nth-child(7) {
background-color: #b5afeb;
}
.fbt-index-post.card:nth-child(11) {
background-color: #ff9900;
}
.fbt-index-post.card:nth-child(15) {
background-color: #939ead;
}
.fbt-index-post.card h3 {
color: #ffffff !important;
}
.fbt-index-post.card h3 a {
color: #ffffff !important;
}
.fbt-index-post.card h3 a:hover {
text-decoration: underline;
}
.fbt-index-post.card h3:hover {
text-decoration: underline;
}
.fbt-index-post.card .post-meta {
color: #ffffff !important;
}
.fbt-index-post.card .post-meta a {
color: #ffffff !important;
}
.fbt-index-post.card .post-meta .post-author {
color: #ffffff !important;
}
.fbt-index-post.card .card-text {
color: #ffffff !important;
}
.card-columns .fbt-index-post.card {
margin-bottom: calc(35px - 5px);
}
@media (min-width: 576px) {
.card-columns {
-webkit-column-count: 1;
column-count: 1;
-webkit-column-gap: 35px;
column-gap: 35px;
}
}
@media (min-width: 768px) {
.card-columns {
-webkit-column-count: 2;
column-count: 2;
}
}
@media (min-width: 992px) {
.card-columns {
-webkit-column-count: 3;
column-count: 3;
}
}
.video-icon {
position: absolute;
top: 15px;
left: 15px;
width: 42px;
height: 42px;
text-align: center;
border-radius: 100%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #fff;
border: 2px solid #fff;
font-size: 18px;
background: rgba(0, 0, 0, 0.4);
}
.video-icon i {
text-align: center;
margin-left: 3px;
line-height: 38px;
}
SCSS Structure
/* Related Posts
===================================== */
.fbt-rel-post-wrapper {
.fbt-shape-title {
&::before {
right: -30px;
top: -30px;
background-color: $rp_shape_background_color;
}
}
}
#related-posts {
.fbt-post-thumbnail {
height: $rp_thumbnail_height;
}
.card {
box-shadow: 0 8px 20px rgba(0,31,52,.15);
}
h5 {
a {
&:hover {
color: $rp_hover_color;
text-decoration: underline;
}
}
}
}
Source & Credits
- Fonts
- Icons
- Framework
Support
Thank you so much for purchasing this template. Glad to help you if you have any questions relating to this template. fbtemplates